<template>
  <!-- 查询表单 -->
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="角色名称">
        <el-input
          v-model="formInline.roleName"
          placeholder="请输入角色名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="权限字符">
        <el-input
          v-model="formInline.roleKey"
          placeholder="请输入权限字符"
        ></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.status" placeholder="正常">
          <el-option label="正常" value="0"></el-option>
          <el-option label="停用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="zhcx">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 查询表单 -->
    <el-button
      type="primary"
      @click="centerDialogVisible = true"
      icon="el-icon-circle-plus-outline"
      >添加角色</el-button
    >
    <!-- 模态框 -->

    <el-dialog
      title="角色添加"
      :visible.sync="centerDialogVisible"
      width="50%"
      center
    >
      <span>
        <!-- 添加表单 -->
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="ruleForm.roleName"></el-input>
          </el-form-item>

          <el-form-item label="权限字符" prop="name">
            <el-input v-model="ruleForm.roleKey"></el-input>
          </el-form-item>
          <el-form-item label="显示顺序" prop="name">
            <el-input-number
              v-model="ruleForm.roleSort"
              controls-position="right"
              @change="handleChange"
              :min="1"
              :max="10"
            ></el-input-number>
          </el-form-item>

          <el-form-item label="用户状态">
            <el-radio v-model="ruleForm.status" label="0">正常</el-radio>
            <el-radio v-model="ruleForm.status" label="2">禁用</el-radio>
          </el-form-item>

          <el-form-item label="备注" prop="desc">
            <el-input type="textarea" v-model="ruleForm.remark"></el-input>
          </el-form-item>
          <el-form-item label="" prop="name">
            <el-input type="hidden" v-model="ruleForm.roleId"></el-input>
          </el-form-item>

          <el-form-item label="菜单权限" prop="desc">
            <el-tree
              :data="data"
              show-checkbox
              node-key="menuId"
              @node-click="handleNodeClick"
              :default-expanded-keys="[2, 3]"
              :default-checked-keys="[5]"
              :props="defaultProps"
              ref="tree"
            >
            </el-tree>
          </el-form-item>
        </el-form>
        <!-- 添加表单 -->
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getCheckedKeys">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 模态框 -->
    <el-table :data="tableData" border style="width: 73%" height="400">
      <el-table-column
        prop="roleId"
        label="角色编号"
        width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="roleName"
        label="角色名称"
        width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        n
        prop="roleKey"
        label="权限字符"
        width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="roleSort"
        label="显示顺序"
        width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="status"
        :formatter="formstatus"
        label="角色状态"
        width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="显示时间"
        width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            @click="deleteRole(scope.row)"
            icon="el-icon-delete"
          ></el-button>
          <el-button
            type="primary"
            @click="querybyid(scope.row)"
            icon="el-icon-edit"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  getrole,
  zhcx,
  deleteRole,
  saveSysroleMenu,
  saveSysrole,
  updateRole
} from "@/api/role";
import { getmenu } from "@/api/menu";
export default {
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "menuName"
      },
      centerDialogVisible: true,

      //表单
      ruleForm: {
        roleName: "",
        roleKey: "",
        roleSort: "1",
        status: "",
        createBy: "张三",
        remark: ""
      },
      //权限添加数据

      //表单验证
      // rules: {
      //   name: [
      //     { required: true, message: "请输入活动名称", trigger: "blur" },
      //     { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
      //   ],

      //   resource: [
      //     { required: true, message: "请选择活动资源", trigger: "change" }
      //   ],
      //   desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]
      // },
      centerDialogVisible: false,
      //综合查询表单
      formInline: {
        roleName: "",
        roleKey: "",
        status: ""
      },
      tableData: []
    };
  },
  //网页加载事件
  mounted: function() {
    //列表显示
    this.queryrole();
    this.querymenu();
  },
  methods: {
    //模态框按钮
    getCheckedKeys() {
      //选中的树形菜单数据
      let menuId = this.$refs.tree.getCheckedKeys().join(",");

      let aa = this.ruleForm.roleId;
      if (aa == null) {
        //添加
        saveSysrole(this.ruleForm).then(response => {
          //验证是否添加成功
          if (response.code === 20000) {
            console.log(response.data[0].roleId);
            let roleId = response.data[0].roleId;
            //添加权限
            saveSysroleMenu(roleId, menuId).then(response => {
              console.log(response.data);
              if (response.code === 20000) {
                //赋空表单
                this.ruleForm = [];
                //刷新表单
                this.queryrole();
                //关闭模态框
                this.centerDialogVisible = false;
              }
            });
          }
        });
      } else {
        console.log("我是修改");
        updateRole(this.ruleForm).then(response => {
          console.log(response.data);
          if (response.code === 20000) {
            let roleId = this.ruleForm.roleId;
            saveSysroleMenu(roleId, menuId).then(response => {
              console.log(response.data);
              if (response.code === 20000) {
                //赋空表单
                this.ruleForm = [];
                //刷新表单
                this.queryrole();
                //关闭模态框
                this.centerDialogVisible = false;
              }
            });
          }
        });
      }
    },
    //树形菜单
    handleNodeClick(data) {
      console.log(this.$refs.tree.getHalfCheckedKeys());
    },
    //菜单表查询所有
    querymenu() {
      getmenu().then(response => {
        console.log(response.data);
        this.data = response.data;
      });
    },
    //树形控件点击事件
    handleChange(value) {
      console.log(value);
    },
    //综合查询
    zhcx() {
      zhcx(this.formInline).then(response => {
        console.log(response.data);
        this.tableData = response.data;
      });
    },
    formstatus: function(row, column) {
      return row.delFlag == "0"
        ? "正常"
        : row.delFlag == "2"
        ? "停用"
        : "未知账号";
    },
    //根据id查询
    querybyid(row) {
      console.log(row);
      this.centerDialogVisible = true;
      this.ruleForm = row;
    },
    //删除方法
    deleteRole(row) {
      console.log(row.roleId);
      let that = this;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteRole(row.roleId).then(response => {
            console.log(response.code);
            if (response.code === 20000) {
              console.log("我成功了");
              that.queryrole();
            }
          });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //角色表列表显示
    queryrole() {
      getrole(this.tableData).then(response => {
        console.log(response.data);
        this.tableData = response.data;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
</style>